<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id"></div>
    <!-- <div class="around-center"></div> -->
    <!-- <div class="around-line"></div> -->
    <!-- <div class="around-out"></div> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import autoSize from '../../uitils/auto-font-size.js'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle,
  },
  name: 'chart-rose-pie',
  props: {
    title: String,
    shadow: {
      type: Boolean,
      default: true,
    },
    color: {
      type: Array,
      default: () => {
        return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      minAngle: 42,
      center: ['28%', '52%'],
      myChart: null,
    }
  },
  computed: {
    id: function () {
      return `main-${Math.random()}`
    },
    dataMap: function () {
      let obj = {}
      this.data.map((item, index) => {
        obj[item.name] = {
          dataIndex: index,
          name: item.name,
          ratio: item.ratio,
          value: item.value,
        }
      })

      return obj
    },
  },
  mounted() {
    setTimeout(() => {
      this.onInit()
    }, 3500)
  },
  updated() {
    setTimeout(() => {
      this.onInit()
    }, 1000)
  },
  methods: {
    onInit() {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option

      // this.data.map(item => {
      //   if(item.value < 5) {
      //     item.value = 5
      //   }
      // })

      option = {
        animationDuration: 4000,
        animationDurationUpdate: 2000,
        tooltip: {
          show: true,
          formatter: (params) => {
            const { data, dataIndex } = params
            let color = ''
            if (dataIndex < this.color.length) {
              color = this.color[dataIndex]
            } else {
              color = this.color[dataIndex % this.color.length]
            }

            const icon = `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
            const name = `<span style="color: ${color};">${data.name}</span>`
            const ratio = ` / ${data.ratio || '0%'}`
            return icon + name + ratio
          },
        },
        color: this.color,
        legend: {
          show: true,
          type: 'scroll',
          orient: 'vertical',
          selectedMode: false,
          top: 'center',
          left: '52%',
          itemGap: autoSize(20),
          stillShowZeroSum: false,
          pageTextStyle: {
            color: '#fff',
          },
          textStyle: {
            fontSize: autoSize(14),
            // color: '#',
            rich: {
              a: {
                fontSize: autoSize(14),
                color: '#',
              },
              value: {
                fontSize: autoSize(14),
                color: '#fff',
              },
            },
          },
          formatter: (params) => {
            const { name, value, ratio, dataIndex } = this.dataMap[params]
            // return `{a|${params}}{value| / ${ratio || 0}%}`
            return `{a|${params}}{value| / ${ratio || '0%'}}`
          },
          // padding: [0, -130, 30, -110],

          itemWidth: 13,
          itemHeight: 13,
          icon: 'roundRect',
          data: this.data,
        },
        series: [
          // 主要展示层的
          {
            type: 'pie',
            // radius: ['21%', '65%'],
            center: this.center,
            label: {
              show: false,
              position: 'inside',
              formatter: '{d} %'
            },
            z: 5,
            roseType: true,
            data: this.data,
          },
          // 边框的设置
          {
            type: 'pie',
            // radius: ['21%', '60%'],
            center: this.center,
            label: {
              show: false,
            },
            itemStyle: {
              color: 'rgba(0, 0, 0, .2)',
            },
            z: 6,
            roseType: true,
            data: this.data,
          },
          // 圆心
          // 圆心
          // {
          //   radius: ['0', '12%'],
          //   center: this.center,
          //   type: 'pie',
          //   color: '#C2D7FD',
          //   minAngle: 30,
          //   emphasis: {
          //     scale: false,
          //   },
          //   label: {
          //     show: false,
          //   },
          //   hoverAnimation: false,
          //   tooltip: {
          //     show: false,
          //   },
          //   z: 5,
          //   itemStyle: {
          //     shadowColor: '#000',
          //     shadowBlur: 30,
          //   },
          //   data: [
          //     {
          //       value: 0,
          //     },
          //   ],
          // },
          // // 圆心外圈
          // {
          //   radius: ['20%', '19%'],
          //   center: this.center,
          //   type: 'pie',
          //   color: '#C2D7FD',
          //   minAngle: 30,
          //   emphasis: {
          //     scale: false,
          //   },
          //   label: {
          //     show: false,
          //   },
          //   hoverAnimation: false,
          //   tooltip: {
          //     show: false,
          //   },
          //   itemStyle: {
          //     shadowColor: '#000',
          //     shadowBlur: 10,
          //   },
          //   z: 5,
          //   data: [
          //     {
          //       value: 0,
          //     },
          //   ],
          // },
          // 外圈
          // {
          //   radius: ['70%', '69%'],
          //   center: this.center,
          //   type: 'pie',
          //   minAngle: 30,
          //   emphasis: {
          //     scale: false,
          //   },
          //   label: {
          //     show: false,
          //   },
          //   hoverAnimation: false,
          //   tooltip: {
          //     show: false,
          //   },
          //   itemStyle: {
          //     color: '#00CBFF',
          //     shadowColor: '#000',
          //     shadowBlur: 10,
          //   },
          //   z: 5,
          //   data: [
          //     {
          //       value: 0,
          //     },
          //   ],
          // },
        ],
      }

      myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 30.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);
  display: flex;
  flex-flow: column;

  .main {
    flex: 1;
  }
}
</style>
